<template>
  <div>
    <Row :gutter="10">
      <i-col v-for="(item, index) in videoList" :key="index" :span="8" style="margin-top:10px">
        <Card>
          <p slot="title" style="text-align:center">{{index + 1 + "号视频"}}</p>
          <p style="font-weight:bold;font-size:20px">视频名称：{{item.name}}</p>
          <p style="font-weight:bold;font-size:20px">视频大小：{{item.size}}</p>
          <p style="font-weight:bold;font-size:20px">视频长度：{{item.length}}</p>
          <p style="font-weight:bold;font-size:20px">视频完整性：{{item.intergrity}}</p>
          <div style="text-align:center" v-if="item.imagePath">
            <img
              :src="item.imagePath"
              height="100%"
              width="100%"
              @click="playVideo(item)"
            />
          </div>
        </Card>
      </i-col>
    </Row>
    <Modal
      v-model="isShowVideo"
      :title="videoTitle"
      width="1080"
      class-name="vertical-center-modal"
      footer-hide
      @on-cancel="cancelModal"
    >
      <div style="height: 100%;padding: 10px 10px;">
        <MyVideoMp4 ref="VideoMp4" :src="videoPath" v-if="isShowVideo"></MyVideoMp4>
      </div>
    </Modal>
  </div>
</template>

<script>
import MyVideoMp4 from "@/components/myvideo/MyVideoMp4";

export default {
  components: {
    MyVideoMp4
  },
  props: {
    videoList: {
      type: Array
    }
  },
  data() {
      return {
          isShowVideo:false,
          videoTitle:"",
          videoPath:""
      }
  },
  methods: {
    playVideo(data) {
        this.videoTitle = data.name
        this.videoPath = data.videoPath
        this.isShowVideo = true

    },
    cancelModal(){
        this.$refs.VideoMp4.$refs.videoPlayer.player.pause()
    }
  }
};
</script>

<style lang="less">
</style>